<template>
     <div class="collectorOut-big">
       <div class="collectorOut" v-for="(item,i) in userList" :key="i">
        <img :src="item.avatarUrl" alt="">
        <div>
        <p>{{item.nickname}}</p>
        <p style="font-size:12px; color:#aaa;">{{item.signature}}</p>
        </div>
      </div>
     </div>
      
</template>

<script>
 var count=0;
export default {
   name:"collector",
   props:{

   },
   data(){
       return{
           userList:[],
       }
   },
   mounted(){
        this.getMusicListFolloweds()
 window.addEventListener('scroll', this.scrollDs(  this.getMusicListFolloweds,3000))
   },
   methods:{
        scrollDs(fn,delay){
          let last=0;
         return function(){
            //  使用防抖 阻止滑档多次触发
             let noew= +new Date()
             if((noew-last)>delay){
                 last=noew
                fn(count++)
             }
         }
       },
    async getMusicListFolloweds(num) {
  
         num=num*20
      let {data:res} = await this.$request("/playlist/subscribers", {
        id: this.$route.query.id,
        offset: num || 1,
      });
      if(res.code!==200) return
      console.log(res)
     this.userList=[... this.userList,...res.subscribers]
        
      }
         
   },
}
</script>

<style lang="less" scoped>
.collectorOut-big{
    display:flex;
    flex-wrap:wrap;
    // height:1000px;
}
.infinite-list{
    // display:flex;
    // flex-wrap:wrap;
}
    .collectorOut{
      margin-top:20px;
      width:33.33%;
      height:100px;
      display:flex;
      align-items:center;
      &:hover{
          background-color:#ccc;
          border-radius:10px;
      }
        img{
            margin-left:10px;
            width:80px;
            height:80px;
            border-radius:10px;
        }
        div{
        p{
            font-size:14px;
            color:#000;
            padding:20px 10px;
        }
        
           
        }
    }
    
</style>